<template>
  <view class="chat-bg">
    <view class="chat-title">学习计划AI对话</view>
    <view class="chat-list">
      <view v-for="(msg, i) in messages" :key="i" :class="['chat-item', msg.role]">
        <text class="chat-role">{{ msg.role === 'student' ? '我' : 'AI' }}</text>
        <text class="chat-content">{{ msg.content }}</text>
      </view>
    </view>
    <view class="chat-input-bar">
      <input class="chat-input" v-model="input" placeholder="请输入内容..." />
      <button class="send-btn" @tap="send">发送</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
const input = ref('')
const messages = ref([
  { role: 'ai', content: '你好，我是AI学习助手，有什么学习计划想和我聊聊吗？' }
])
function send() {
  if (!input.value) return
  messages.value.push({ role: 'student', content: input.value })
  // 模拟AI回复
  setTimeout(() => {
    messages.value.push({ role: 'ai', content: '收到！我会根据你的需求为你定制学习建议。' })
  }, 800)
  input.value = ''
}
</script>

<style scoped>
.chat-bg { min-height: 100vh; background: #eaf6ff; display: flex; flex-direction: column; }
.chat-title { font-size: 36rpx; font-weight: bold; color: #07c160; text-align: center; padding: 32rpx 0 16rpx 0; }
.chat-list { flex: 1; padding: 24rpx; overflow-y: auto; }
.chat-item { margin-bottom: 32rpx; display: flex; flex-direction: column; }
.chat-item.student { align-items: flex-end; }
.chat-item.ai { align-items: flex-start; }
.chat-role { font-size: 22rpx; color: #888; margin-bottom: 4rpx; }
.chat-content { background: #fff; border-radius: 16rpx; padding: 18rpx 28rpx; font-size: 28rpx; color: #222; max-width: 70vw; }
.chat-item.student .chat-content { background: #07c160; color: #fff; }
.chat-input-bar { display: flex; padding: 16rpx; background: #fff; border-top: 1rpx solid #eee; }
.chat-input { flex: 1; border-radius: 16rpx; border: 1rpx solid #eee; padding: 16rpx; font-size: 28rpx; background: #f8f8f8; margin-right: 16rpx; }
.send-btn { background: #07c160; color: #fff; font-size: 28rpx; border-radius: 16rpx; padding: 0 32rpx; }
</style> 